<template>
  <div>
    <a-form :form="form" class="form">
      <a-card :bordered="false" title="必填信息" :loading="loading1">
        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="商铺名称">
              <a-input
                type="textarea"
                placeholder="请输入商铺名称"
                v-decorator="[
                  'title',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入商铺名称',
                      },
                      { max: 255, message: '不得超过255个字符' },
                    ],
                    initialValue:formData.title
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="排序(越大越往前显示)">
              <a-input
                placeholder="请输入排序"
                v-decorator="[
                  'sort',
                  {
                    rules: [{ validator: checkNumber }],
                     initialValue:formData.sort
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="状态">
              <a-switch
                checked-children="上架"
                un-checked-children="下架"
                v-decorator="[
                  'shelves',
                  { valuePropName: 'checked', initialValue: formData.shelves?true:false },
                  
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="装修">
              <a-select
                show-search
                v-decorator="[
                  'decorate',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择装修',
                      },
                    ],
                     initialValue:formData.decorate

                  },
                ]"
                placeholder="请选择装修"
              >
                <a-select-option value="豪装"> 豪装 </a-select-option>
                <a-select-option value="精装"> 精装 </a-select-option>
                <a-select-option value="简装"> 简装 </a-select-option>
                <a-select-option value="毛坯"> 毛坯 </a-select-option>
                <a-select-option value="标准交付"> 标准交付 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="占地面积(㎡)">
              <a-input
                type="textarea"
                placeholder="请输入占地面积"
                v-decorator="[
                  'spaceNum',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入占地面积',
                      },
                      { validator: checkNumber },
                    ],
                    initialValue:formData.spaceNum
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="工位">
              <a-input
                placeholder="请输入工位"
                type="textarea"
                v-decorator="[
                  'station',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入工位',
                      },
                    ],
                     initialValue:formData.station
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="元/㎡/月">
              <a-input
                type="textarea"
                placeholder="请输入价格"
                v-decorator="[
                  'meters_money',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入价格',
                      },
                      { validator: checkPrice },
                    ],
                     initialValue:formData.meters_money
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="总价(万元/月)">
              <a-input
                type="textarea"
                placeholder="请输入价格"
                v-decorator="[
                  'total_price',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入价格',
                      },
                      { validator: checkPrice },
                    ],
                     initialValue:formData.total_price

                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="楼层">
              <a-input
                type="textarea"
                placeholder="请输入楼层(底层,中层)"
                v-decorator="[
                  'level_des',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入楼层',
                      },
                    ],
                     initialValue:formData.level_des

                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
      <a-card
        class="card"
        :title="'房源负责人'"
        :bordered="false"
        :loading="loading4 || loading1"
        style="margin-top: 20px"
      >
        <a-row>
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="房源负责人">
              <a-select
                @change="adminChange"
                show-search
                v-decorator="[
                  'admin_id',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择房源负责人',
                      },
                    ],

                  },
                ]"
                placeholder="请选择房源负责人"
              >
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in adminList"
                  :key="index"
                >
                  {{ item.nickName
                  }}<span v-show="item.realName">({{ item.realName }})</span>
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="咨询电话">
              <a-input
                type="textarea"
                placeholder="请输入咨询电话"
                v-decorator="[
                  'hotline',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入咨询电话',
                      },
                      { validator: checkPhone },
                    ],
                     initialValue:formData.hotline
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card
        class="card"
        :title="'区域'"
        :bordered="false"
        :loading="loading3 || loading1"
        style="margin-top: 20px"
      >
        <a-row>
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="街道">
              <a-select
                @change="handleChange"
                show-search
                v-decorator="[
                  'street_id',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择街道',
                      },
                    ],
                   initialValue:Number(formData.street_id)
                  },
                ]"
                placeholder="请选择街道"
              >
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in areaListSelList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="社区">
              <!-- {{  Number(formData.community_id) }} -->
              <a-select
                show-search
                v-decorator="[
                  'community_id',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择社区',
                      },
                      
                    ],
                      initialValue:Number(formData.community_id)  

                  },
                ]"
                placeholder="请选择社区"
              >
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in areaCommunity"
                  :key="index"
                  
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
      <a-card
        class="card"
        :title="'选填信息'"
        :bordered="false"
        :loading="loading5"
        style="margin-top: 20px"
      >
        <a-row>
          <a-col :lg="24" :sm="24">
            <a-form-item label="VR链接">
              <a-input
                type="textarea"
                placeholder="请输入VR链接"
                v-decorator="['vrUrl',{
                  initialValue:formData.vrUrl

                }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
       <a-row>
          <a-col :lg="24" :sm="24">
            <a-form-item label="房源标签">
              <a-select
                mode="tags"
                style="width: 100%"
                :token-separators="[',']"
                 v-decorator="['tagList',{
                   initialValue:formData.tagList?formData.tagList.split(','):undefined
                 }]"
              >
                <a-select-option  :value="item" v-for="(item, index) in tagList" :key="index">
                  {{ item }}
                </a-select-option>

              
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
      <a-card
        class="card"
        :title="'封面图片'"
        :bordered="false"
        :loading="loading1"
        style="margin-top: 20px"
      >
        <a-col :lg="{ span: 7 }" :sm="24">
          <oneImage ref="oneImage" :path="'store'" :imageUrl="formData.cover_image? imageUrl(formData.cover_image):undefined" />
        </a-col>
      </a-card>

      <a-card
        class="card"
        :title="'轮播图'"
        :bordered="false"
        :loading="loading1"

        style="margin-top: 20px"
      >
      <!-- {{formData.many_image}} -->
        <manyImage ref="manyImage" :path="'store'" :imagesArray="formData.many_image?formData.many_image.split(','):undefined" />
      </a-card>

      <a-card
        class="card"
        :title="'户型格局图'"
        :bordered="false"
        :loading="loading1"

        style="margin-top: 20px"
      >
        <manyImage ref="pattern" :path="'store'" :only="'A'" :imagesArray="formData.pattern?formData.pattern.split(','):undefined" />
      </a-card>

      <a-card
        class="card"
        :title="'位置信息'"
        :bordered="false"
        :loading="loading1"

        style="margin-top: 20px"
      >
        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="经度">
              <a-input
                placeholder="请点击地图"
                disabled
                v-decorator="[
                  'longitude',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请点击地图',
                      },
                    ],
                    initialValue:formData.longitude
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="纬度">
              <a-input
                placeholder="请点击地图"
                disabled
                v-decorator="[
                  'latitude',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请点击地图',
                      },
                    ],
                    initialValue:formData.latitude

                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="详细地址(点击地图)">
              <a-input
                type="textarea"
                placeholder="请输入详细地址"
                v-decorator="[
                  'address',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入详细地址',
                      },
                      { max: 255, message: '不得超过255个字符' },
                      
                    ],
                    initialValue:formData.address

                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <Map @spot="getMap" @getAddress="getAddress" :lngDefault="Number(formData.longitude)" :latDefault="Number(formData.latitude)" v-if="mapShow"></Map>
      </a-card>

      <a-card
        class="card"
        :title="'店铺简介(不填则不显示)'"
        :bordered="false"
        :loading="loading1"

        style="margin-top: 20px"
      >
        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="房源编号">
              <a-input
                placeholder="请输入房源编号"
                type="textarea"
                v-decorator="[
                  'bed_number',
                  { rules: [{ max: 255, message: '不得超过255个字符' }] 
                  ,initialValue:formData.bed_number

                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="层高">
              <a-input
                placeholder="请输入层高"
                type="textarea"
                v-decorator="[
                  'height',
                  { rules: [{ max: 255, message: '不得超过255个字符' }]
                  ,initialValue:formData.height
                   },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="层数">
              <a-input
                placeholder="请输入层数"
                type="textarea"
                v-decorator="[
                  'layerNumber',
                  { rules: [{ max: 255, message: '不得超过255个字符' }]
                    ,initialValue:formData.layerNumber },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="物业费">
              <a-input
                placeholder="请输入物业费"
                type="textarea"
                v-decorator="[
                  'propertyFee',
                  { rules: [{ max: 255, message: '不得超过255个字符' }]
                   ,initialValue:formData.propertyFee },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="办公格局">
              <a-input
                placeholder="请输入办公格局"
                type="textarea"
                v-decorator="[
                  'office',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                  initialValue:formData.office },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="停车费">
              <a-input
                placeholder="请输入停车费"
                type="textarea"
                v-decorator="[
                  'stall_money',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                   initialValue:formData.stall_money },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="车位数">
              <a-input
                placeholder="请输入车位数"
                type="textarea"
                v-decorator="[
                  'stall',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                   initialValue:formData.stall },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="空调费">
              <a-input
                placeholder="请输入空调费"
                type="textarea"
                v-decorator="[
                  'air_cost',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                  initialValue:formData.air_cost },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="窗面朝向">
              <a-input
                placeholder="请输入窗面朝向"
                type="textarea"
                v-decorator="[
                  'towards_window',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                  initialValue:formData.towards_window  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="免租期">
              <a-input
                placeholder="请输入免租期"
                type="textarea"
                v-decorator="[
                  'rent_holiday',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                   initialValue:formData.rent_holiday  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="最短租期">
              <a-input
                placeholder="请输入最短租期"
                type="textarea"
                v-decorator="[
                  'shortest_lease',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                   initialValue:formData.shortest_lease  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="转让费">
              <a-input
                placeholder="请输入转让费"
                type="textarea"
                v-decorator="[
                  'transfer_fee',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                  initialValue:formData.transfer_fee },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="实用率">
              <a-input
                placeholder="请输入实用率"
                type="textarea"
                v-decorator="[
                  'utility_ratio',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                   initialValue:formData.utility_ratio
                   },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
       <a-card
      class="card"
      :title="'自定义'"
        :loading="loading1"

      :bordered="false"
      style="margin-top: 20px"
    >
      <FormEdit ref="custom" :columns_="customColumn" :dataSource_="custom"></FormEdit>
    </a-card>

      <footer-tool-bar style="z-index: 8">
        <a-button type="primary" @click="validate" :loading="loading2"
          >提交</a-button
        >
      </footer-tool-bar>
    </a-form>
  </div>
</template>

<script>
const customColumn = [
  {
    title: "字段",
    dataIndex: "field",
    dateType:"textarea",
    key: "field",
    width: "20%",
    scopedSlots: { customRender: "field" },
  },
  {
    title: "描述",
    dataIndex: "content",
    dateType:"textarea",
    key: "content",
    width: "60%",
    scopedSlots: { customRender: "content" },
  },
];
import FooterToolBar from "@/components/tool/FooterToolBar";
import Map from "@/components/map";
import { areaSelList } from "@/services/area";
import oneImage from "@/components/uploadImages/oneImage";
import manyImage from "@/components/uploadImages/manyImage";
import { adminSelectList } from "@/services/admin";
import FormEdit from "@/components/form/FormEdit";

import {
  storeEdit,
  storeManyImage,
  storeCoverImage,
  storeTagList,
  storeSelOne
} from "@/services/store";
export default {
  name: "AdminAdd",
  //   i18n: require('../i18n'),
  components: {
    // CollectionCreateForm: CollectionCreateForm,
    FooterToolBar,
    Map,
    oneImage,
    FormEdit,
    manyImage,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      areaListSelList: [],
      adminList: [],
      tagList: [],
      areaCommunity: [],
      formData:{},
      customColumn:customColumn,
      custom:[],
      id:"",
      loading2: false,
      loading3: false,
      loading4: false,
      loading1: false,
      mapShow:false,
      loading5:false,
    };
  },
  created() {
  
    this.id = this.$route.query.store_id


      // this.$nextTick(() => {
      //     this.form.setFieldsValue({ admin_id: mine });
      //     this.adminChange(mine);
      //   });

  },
  watch: {
     "$route.query.store_id": function () {
      let store_id = this.$route.query.store_id;
      if (store_id && store_id != this.id) {
        this.id = store_id;
      }
      //重新调用请求数据的方法，刷新页面数据
    },
    id(newValue, oldValue) {
      this.loading1 = true;
      this.mapShow = false
      storeSelOne({ id: newValue })
        .then(async (res) => {
          if (res.code == 200) {
            this.formData = res.data;
            this.custom =  this.formData.custom?JSON.parse( this.formData.custom):[]
          
           this.adminSelectListLoad();
           this.storeTagListLoad();

           await  this.areaSelListLoad();
            this.reloadCommunity(this.formData.street_id)
            this.loading1 = false
            this.mapShow = true
          }
        })
       
    },

  },
  methods: {
    handleChange(e) {
      this.reloadCommunity(e)
      this.form.setFieldsValue({ community_id: undefined });
    },
    reloadCommunity(e){
    for (let i = 0; i < this.areaListSelList.length; i++) {
        if (this.areaListSelList[i].id == e) {
          this.areaCommunity = this.areaListSelList[i]["child"];
        }
      }
    },
    adminChange(e) {
      for (let i = 0; i < this.adminList.length; i++) {
        if (this.adminList[i].id == e) {
          this.form.setFieldsValue({ hotline: this.adminList[i].phone });
          break;
        }
      }
    },
     async storeTagListLoad(){
      this.loading5 = true
      let res =   await storeTagList();
     if(res.code == 200){
       this.tagList = res.data.tagList? res.data.tagList.split(","):[]
      //  console.log( this.tagList)
     }
     this.loading5 = false
    },
    async areaSelListLoad() {
      this.loading3 = true;
      let areaListSelListData = await areaSelList();
      if (areaListSelListData.code == 200) {
        this.areaListSelList = areaListSelListData.data;
      }
      this.loading3 = false;
    },
    async adminSelectListLoad() {
      this.loading4 = true;
      let res = await adminSelectList();
      if (res.code == 200) {
        const { list, mine } = res.data;
        this.adminList = list;
        this.$nextTick(() => {
          this.form.setFieldsValue({ admin_id: Number(this.formData.admin_id) });
          // this.adminChange(Number(this.formData.admin_id));
        });
      }
      this.loading4 = false;
    },
    getMap(obj) {
      this.form.setFieldsValue(obj);
    },
    getAddress(e) {
      this.form.setFieldsValue(e);
    },
    async validate() {
      const { form, $message, $router, $refs } = this;
      const this_ = this;


      form.validateFields((err) => {
        if (err) {
          $message.error("信息填写有误");
          return;
        } else {
          // console.log(form.getFieldsValue());
          this.$confirm({
            title: "确定要编辑吗?",
            // content: h => <div style="color:red;">Some descriptions</div>,
            async onOk() {
              this_.loading2 = true;
              let formData = form.getFieldsValue();

              let oneImage = $refs.oneImage.getFile(); //封面图片

              if (oneImage.has("file")) {
                if (!oneImage.get("file")) {
                  formData["cover_image"] = "";
                } else {
                  let fileRes = await storeCoverImage(oneImage);
                  if (fileRes.code == 200) {
                    formData["cover_image"] = fileRes.data.url;
                  } else {
                    $message.error("封面图片上传失败");
                    return;
                  }
                }
              }
              let manyImage = $refs.manyImage.getFile(); //多图
              formData["many_image"] = manyImage.oldImageStr
              if (manyImage.formDataImg) {
                let fileRes = await storeManyImage(manyImage.formDataImg);
                if (fileRes.code == 200) {
                  formData["many_image"] +=  (formData["many_image"]?',':'')+fileRes.data;
                } else {
                  $message.error("轮播图上传失败");
                  return;
                }
              } 
  

              let patternImage = $refs.pattern.getFile(); //多图
              formData["pattern"] = patternImage.oldImageStr
              if (patternImage.formDataImg) {
                let fileRes = await storeManyImage(patternImage.formDataImg);
                if (fileRes.code == 200) {
                  formData["pattern"] +=  (formData["pattern"]?',':'')+fileRes.data;
                } else {
                  $message.error("轮播图上传失败");
                  return;
                }
              } 
             

                formData["custom"] =   JSON.stringify(
                $refs.custom.getArray()
              ); //大厦简介自定义
                        formData["tagList"] = formData["tagList"]? formData["tagList"].join(','):''

              
              let res = await storeEdit({ formData:formData,conditions:{id:this_.id} });
              if (res.code == 200) {
                $message.success(res.message);
                this_.closeTabs.$emit("closeTabs");
                $router.push("/findShop/storeManagement/storeList");
              }

              this_.loading2 = false;
            },
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.aSelect {
  display: flex;
  width: 100%;
  justify-content: space-between;
  /* border: 1px solid red; */
  align-items: center;
}

.card {
  margin-bottom: 24px;
}

.form {
  .form-row {
    margin: 0 -8px;
    // display: flex;
    // justify-content: space-between;
    //    display: flex;
    // justify-content: space-between;
  }
  .ant-col-md-12,
  .ant-col-sm-24,
  .ant-col-lg-6,
  .ant-col-lg-8,
  .ant-col-lg-10,
  .ant-col-xl-8,
  .ant-col-xl-6 {
    padding: 0 8px;
  }
}
.topRow button {
  margin-top: 5px;
  margin-left: 10px;
}

.portraitImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  //   border: 1px solid red;
}

#portraitImage {
  //   width: 100%;
  //   height: 100%;
}

.portraitShow {
  width: 70%;
  height: 0;
  padding-bottom: 70%;
  border: 1px dashed #ced0d3;
  // margin-left: 20px;
  position: relative;
  margin: auto;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  cursor: pointer;
}
.plus-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 20px;
  transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}

.station {
  display: flex;
  align-items: center;
  // border: 1px solid red;
}
</style>
